<template>
  <alert-fade name="fade">
    <div class="about">
      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores error, ipsa iure magni odio officiis, omnis quidem 2222recusandae sint sit suscipit ullam velit. Aut dignissimos ex incidunt obcaecati tempora.</p>
      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores error, ipsa iure magni odio officiis, omnis quidem 2222recusandae sint sit suscipit ullam velit. Aut dignissimos ex incidunt obcaecati tempora.</p>
      <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores error, ipsa iure magni odio officiis, omnis quidem 2222recusandae sint sit suscipit ullam velit. Aut dignissimos ex incidunt obcaecati tempora.</p>
      <p @click="handleClick">点我啊，草</p>
      <alert-fade-one name="slide-fade-about-1">
        <div v-if="df">
          <div class="df" >我是特特懒够</div>
          <div class="cover" @click="handleClick">1</div>
        </div>
      </alert-fade-one>
    </div>
  </alert-fade>
</template>

<script>
import AlertFade from '../common/Fade-About'
import AlertFadeOne from '../common/Fade'
export default {
  name: 'About',
  components: {
    AlertFade,
    AlertFadeOne
  },
  data () {
    return {
      df: false
    }
  },
  methods: {
    handleClick () {
      this.df = !this.df
    }
  }
}
</script>

<style lang="stylus" scoped>
  .about
    position: fixed
    left: 0
    top: 0
    bottom: 96px
    z-index: 101
    width: 100%
    .df
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -50%)
      width 80%
      height 35%
      z-index 1166
      background #fff
      border-radius 10px
    .cover
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      z-index 1155
      background-color rgba(0, 0, 0, 0.5)
</style>
